<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>基础用法</span>
          </div>
          <el-row>
            <el-input v-model="input1" placeholder="请输入内容"></el-input>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>禁用状态</span>
          </div>
          <el-row>
            <el-input
              placeholder="请输入内容"
              v-model="input2"
              :disabled="true">
            </el-input>

          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>可清空</span>
          </div>
          <el-row>
            <el-input
              placeholder="请输入内容"
              v-model="input3"
              clearable>
            </el-input>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>密码框</span>
          </div>
          <el-row>
            <el-input placeholder="请输入密码" v-model="input4" show-password></el-input>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>带 icon 的输入框</span>
          </div>
          <el-row>
            <el-input
              placeholder="请选择日期"
              suffix-icon="el-icon-date"
              v-model="input5">
            </el-input>
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input6">
            </el-input>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>文本域</span>
          </div>
          <el-row>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea">
            </el-input>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>复合型输入框</span>
          </div>
          <el-row class="input">
            <el-input placeholder="请输入内容" v-model="input7">
              <template slot="prepend">Http://</template>
            </el-input>
            <el-input placeholder="请输入内容" v-model="input8">
              <template slot="append">.com</template>
            </el-input>
            <el-input placeholder="请输入内容" v-model="input9" class="input-with-select">
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="餐厅名" value="1"></el-option>
                <el-option label="订单号" value="2"></el-option>
                <el-option label="用户电话" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "input",
  data(){
      return {
        input1: '',
        input2:'',
        input3: '',
        input4:'',
        input5: '',
        input6:'',
        input7:'',
        input8: '',
        input9:'',
        textarea:'',
        select: ''
  }
  },
}
</script>

<style scoped lang="scss">
.clearfix{
  font-size: 14px;
}
.el-col{
  margin-bottom: 20px;
}
.el-input,.el-textarea{
  width: 180px;
  margin-right: 10px;
}
.input{
  .el-input{
    width: 300px;
    margin-right: 10px;
  }
}
</style>
